
import Taro, {Component } from '@tarojs/taro'
import {inject, observer} from '@tarojs/mobx'
import {View} from '@tarojs/components'
import {pageSize, navigateTo, articleType, servicePhone, makePhoneCall, companyName} from '../../utils/common'


import {IStoreProps} from '../../store/Stores'

import './help.scss'

interface IHomeProps extends IStoreProps {}


@inject("stores")
@observer
class Help extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    pageIndex: 1,
    pageSize: pageSize,
    totalCount: 0,
    items: [] as any[]
  }

  componentWillMount(): void {
    this.getItems()
  }

  link = (url: string = '/pages/index/index'): void => {
    navigateTo(url)
  }

  getItems(): void {
    let { dynamicStore } = this.props.stores
    let { pageIndex, pageSize } = this.state
    dynamicStore.getArticleList({
      id: articleType.help,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items:res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getItems()
      })
    }
  }

  makePhone = () => {
    makePhoneCall(servicePhone)
  }

  render() {
    let { items } = this.state
    return (
      <View className='page-bg content-20'>
        {
          items.length>0&&
        <View className='list-help'>
          {
            items.map(item => {
              return(
                <View className='list-help__item list-help__o' onClick={this.link.bind(this, '/pages/mine/helpDetail?id='+item.id)} key={item.id} style={{justifyContent: 'flexStart'}}>
                  <View className='list-help__title icon-link-theme' style={{justifyContent: 'flexStart'}}>{item.artTitle}</View>
                </View>
              )
            })
          }
        </View>
        }

        <View className='footer-info'>
          <View  onClick={this.makePhone.bind(this)}>客服热线： {servicePhone}</View>
        </View>

        <View className='footer-block' />
      </View>
    )
  }
}

export default Help

